<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			p {
				margin: 100px;
				width: 300px;
			}
			
			#share {
				background-color: deepskyblue;
				width: 150px;
				color: orangered;
				position: absolute;
				display: none;
			}
		</style>
	</head>

	<body>
		<p id="word">全栈工程师的沟通成本几乎为零，因为各种技术都懂，胸有成竹，自己就全做了。即使是在团队协作中，与不同技术人员的沟通也会容易得多，让一个后端和一个前端去沟通，那完全是鸡同鸭讲，更不用说设计师与后端了。但如果有一个人懂产品懂设计懂前端懂后端，那沟通的结果显然不一样，因为他们讲的，彼此都能听得懂。</p>
		<button onclick="btnh1()">h1</button>
		<div id="share"></div>
		<script>
			var selectedText;
			function btnh1(){
				
			}
			window.onload = function() {
				function $(id) {
					return typeof id === "string" ? document.getElementById(id) : null;
				}

				//监听鼠标抬起
				$("word").onmouseup = function(event) {
					var e = event || window.event;

					// 获取选中的文字
					var selectedText;
					if(window.getSelection) { // 标准模式 
						selectedText = window.getSelection().toString();
					} else { // IE 系列
						selectedText = document.selection.createRange().text;
					}

					if(selectedText !== "") {
						$("share").innerText = selectedText;
						$("share").style.display = 'block';
						$("share").style.left = e.clientX + 'px';
						$("share").style.top = e.clientY + 'px';
					}

				};

				//监听文档的点击
				document.onmousedown = function(event) {
					var e = event || window.event;
					var targetId = e.target ? e.target.id : e.srcElement.id;
					if(targetId !== "share") {
						$("share").style.display = "none";
					}

					window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
				}
			}
		</script>
	</body>

</html>